<template>
  <template v-for="(menu, index) in menus" :key="index">
    <template v-if="menu.children">
      <lay-sub-menu :id="menu.id" class="custom-menu">
        <template #icon>
          <lay-icon :type="menu.icon"></lay-icon>
        </template>
        <template #title>
          <span :title="menu.title">{{ menu.title }}</span>
        </template>
        <GlobalMenuItem
          :menus="menu.children"
          :out-index="outIndex + 1"
        ></GlobalMenuItem>
      </lay-sub-menu>
    </template>
    <template v-else>
      <lay-menu-item :id="menu.id" class="custom-menu" :title="menu.title">
        <template #icon>
          <lay-icon :type="menu.icon"></lay-icon>
        </template>
        <template #title>
          <span :title="menu.title">{{ menu.title }}</span>
        </template>
      </lay-menu-item>
    </template>
  </template>
</template>

<script lang="ts">
import GlobalMenuItem from "./GlobalMenuItem.vue";
import { defineComponent } from "vue";

export default defineComponent({
  name: "GlobalMenuItem",
  props: {
    menus: {
      type: Object,
    },
    outIndex: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    const paddingLeft = 20 * props.outIndex + 23 + "px";

    return {
      paddingLeft,
    };
  },
});
</script>

<style>
.custom-menu > a {
  padding-left: v-bind(paddingLeft) !important;
}
</style>
